<template>
	<div class="pages">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="基础设置" name="add">
				<template v-if="activeName=='add'">
					<el-form size="small" ref="dataForm" :rules="rules" :model="dataForm" label-width="160px"
						class="demo-ruleForm">
						<el-form-item label="AccessKeyID" prop="keyid">
							<el-input v-model="dataForm.keyid" placeholder="请输入AccessKeyID" clearable></el-input>
						</el-form-item>
						<el-form-item label="AccessKeySecret" prop="secret">
							<el-input v-model="dataForm.secret" placeholder="请输入AccessKeySecret" clearable></el-input>
						</el-form-item>
						<el-form-item label="签名" prop="sign">
							<el-input v-model="dataForm.sign" placeholder="请输入签名" clearable></el-input>
						</el-form-item>
						<el-form-item label="模板编号" prop="code">
							<el-input v-model="dataForm.code" placeholder="请输入模板编号" clearable></el-input>
						</el-form-item>
						<el-form-item style="text-align: right;">
							<el-button type="primary" @click="submitForm">保存</el-button>
						</el-form-item>
					</el-form>
				</template>
			</el-tab-pane>
			<el-tab-pane label="模板列表" name="list">
				<template v-if="activeName=='list'">
					<el-table :data="dataList" v-loading="dataListLoading" border style="width: 100%"
						header-align="center">
						<el-table-column prop="name" align="center" label="模板名称">
						</el-table-column>
						<el-table-column prop="code" align="center" label="模板code">
						</el-table-column>
						<el-table-column prop="status" align="center" label="是否通知">
							<template slot-scope="scope">
								<span>{{scope.row.status==1?'是':'否'}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="content" align="center" label="短信详情">
						</el-table-column>
						<el-table-column align="center" label="操作" width="100">
							<template slot-scope="scope">
								<el-button type="text" @click="edit(scope.row)">编辑</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</el-tab-pane>
		</el-tabs>
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></add-or-update>
	</div>
</template>

<script>
	import AddOrUpdate from './add-message.vue'
	export default {
		data() {
			return {
				addOrUpdateVisible: false,
				activeName: 'add',
				dataListLoading: false,
				dataList: [],
				dataForm: {
					is_post: 1,
					keyid: '',
					secret: '',
					sign: '',
					code: ''
				},
				rules: {
					keyid: [{
						required: true,
						message: '请输入AccessKeyID',
						trigger: 'blur'
					}],
					secret: [{
						required: true,
						message: '请输入AccessKeySecret',
						trigger: 'blur'
					}],
					sign: [{
						required: true,
						message: '请输入签名',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入模板编号',
						trigger: 'blur'
					}]
				}
			}
		},
		components: {
			AddOrUpdate
		},
		methods: {
			edit(row) {
				this.addOrUpdateVisible = true
				this.$nextTick(() => {
					this.$refs.addOrUpdate.dataForm.id = row.id
					this.$refs.addOrUpdate.init()
				})
			},
			submitForm(formName) {
				this.$refs['dataForm'].validate((valid) => {
					if (valid) {
						this.$loading()
						this.$http.post('/api/settings/setting_sms', this.dataForm).then(res => {
							this.$closeLoading()
							this.$message({
								message: res.msg,
								type: 'success',
								duration: 1000,
								onClose: () => {
									this.$refs.dataForm.resetFields()
									this.getInfo()
								}
							});
						})

					} else {
						return false;
					}
				});
			},
			getInfo() {
				this.$loading()
				this.$http.post('/api/settings/setting_sms', {}).then(res => {
					this.$closeLoading()
					this.dataForm = {
						...this.dataForm,
						...res.result
					}
				})
			},
			getList() {
				this.$http.post('/api/sms/getlist', {}).then(res => {
					this.dataList = res.result
				})
			},
			handleClick(e) {
				if (e.name == 'list') {
					this.getList()
				}
			},
		},
		created() {
			this.getInfo()
		}
	}
</script>

<style scoped lang="scss">
	.tit {
		font-weight: 500;
		font-size: 18px;
		color: #333333;
		line-height: 25px;
		text-align: left;
		font-style: normal;
	}

	.demo-ruleForm {
		width: 500px;
		margin-top: 20px;
	}
</style>